import {Dropdown, Layout, Menu, message, Spin} from "antd";
import React, {useEffect} from "react";
import axios from "axios";
import { Helmet } from 'react-helmet';


const top = () => {
    const isPhoneExist = !!sessionStorage.getItem('phone');
    const img_path = "./profile/" + sessionStorage.getItem('idpicpath');
    async function handleLogout() {
        try {
            await axios.post('http://localhost:8084/user/logout',
            );
            sessionStorage.clear();
            window.location.href = '/'
        } catch (error) {
            console.error(error);
        }
    }
    const menu = (
        <Menu>
            <Menu.Item >个人信息</Menu.Item>
            <Menu.Item onClick={handleLogout}>退出登录</Menu.Item>
        </Menu>
    );
    const handleLoginClick = () => {
        window.location.href = '/login'
    };

    return (
    <div>
        <Helmet>
            <link  rel="stylesheet" href="./layui/css/layui.css" />
            <script  rel="preload" src="./layui/layui.js"></script>
        </Helmet>
        <ul className="layui-nav" lay-filter="">
            <li className="layui-nav-item"><a href="/">首页</a></li>
            <li className="layui-nav-item"><a href="/season">当季果蔬</a></li>
            {!isPhoneExist && (
                <>
                    <li className="layui-nav-item"><a  onClick={handleLoginClick}>登录</a></li>
                </>
            )}
            {isPhoneExist && (
                <>
                    <li className="layui-nav-item"><a href="/Orders">订单</a></li>
                    <li className="layui-nav-item"><a href="">切换卖家</a></li>
                    <li className="layui-nav-item">
                        <a href="/Person"><img src={img_path} style={{ width: '30px', height: '30px' }} className="layui-nav-img" />我</a>
                        <dl className="layui-nav-child">
                            <dd><a onClick={handleLogout}>退了</a></dd>
                        </dl>
                    </li>
                </>
            )}
        </ul>
    </div>
    )
}
export default top;